<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>车位列表</title>
	<link rel="stylesheet" type="text/css" href="../common/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../common/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../common/demo.css">
	<script type="text/javascript" src="../common/jquery.min.js"></script>
	<script type="text/javascript" src="../common/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../common/common.js"></script>
	<script type="text/javascript" src="../common/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>

<table id="dg" title="车位列表" style="width: 99%;height:630px"
	   data-options="rownumbers:true,
						singleSelect:true,
						autoRowHeight:true,
						pagination:true,
						pageSize:20,
						url:'/manage/station/list',
						method:'get',
						toolbar:'#tb'">
	<thead>
	<tr>
		<th data-options="field:'id',width:100,hidden:'true'">id</th>
		<th data-options="field:'carId',width:100">车位编码</th>
		<th data-options="field:'state',width:100,
					formatter: function (state, row, index) {
			       return deletedState(state); <!--value就是数据库具体的值-->
			    }">使用状态</th>
		<th data-options="field:'floorId',width:100">楼号</th>
		<th data-options="field:'unitId',width:100">单元号</th>
		<th data-options="field:'roomId',width:100">房间号</th>
	</tr>
	</thead>
</table>
<table id="approve" class="easyui-window" title="停车记录"
	   data-options="rownumbers:true,
						singleSelect:true,
						autoRowHeight:true,
						pagination:true,
						pageSize:10,
					url:'/manage/station/log',
					method:'get'" style="width:800px;height:420px;">
	<thead>
	<tr>
		<th data-options="field:'carNum',width:80">车牌号</th>
		<th data-options="field:'createTime',width:190,align:'center',
					formatter: function (createTime, row, index) {
			       var datetime = dateFormatter(createTime); <!--value就是数据库具体的值-->
			       return datetime;
			    }">停车时间</th>
	</tr>
	</thead>
</table>

<div id="mm" class="easyui-menu" data-options="onClick:menuHandler" style="width:120px;">
	<div data-options="name:'info'">停车记录</div>
	<div class="menu-sep"></div>
	<div data-options="name:'exit'">Exit</div>
</div>

</body>
<script type="text/javascript">
	$(function(){
		searchA();
	})
	function searchA(){
		var userId = localStorage.getItem("userId");
		var carId = $('#carId').val();
		var data = {
				userId:userId,
				carId:carId
		};
		var pager = $('#dg').datagrid({
			queryParams: data,
			//双击事件
			onDblClickRow :function(rowIndex,rowData){
					getSelected()
				}
		}).datagrid('getPager');	// get the pager of datagrid
		pager.pagination({
			buttons:[{
				iconCls:'icon-edit',
				handler:function(){
					getSelected();
				}
			}]
		});
		pager.pagination().find('a.l-btn').tooltip({
			content: function(){
				var cc = $(this).find('span.l-btn-icon').attr('class').split(' ');
				var icon = cc[1].split('-')[1];
				return icon + ' page';
			}
		});
		$('#approve').window('close');
	}

	function getSelected(){
		var row = $('#dg').datagrid('getSelected');
		if (row){
			$('#approve').window('open');
			$('#approve').datagrid({
						          queryParams: {
						        	  carId: row.carId
						          }
						    });
		}
	}

	function deletedState( state ){
		if("0" == state){
			return "空闲中";
		}else{
			return "使用中";
		}

	}

	function menuHandler(item){
			if(item.name == "info"){
				var row = $('#dg').datagrid('getSelected');
				if (row){
					 $('#approve').datagrid({
				          queryParams: {
				        	  carId: row.carId
				          }
				    });
					$('#approve').window('open');
				}
			}
		}
	</script>
</html>